---
section: Usage
title: Rollup.js
slug: /docs/rollup/
order: 50
---

# Rollup.js

SVGR provides an official [rollup.js](https://rollupjs.org) plugin to import SVG as React components.

<carbon-ad />

## Install

```bash
npm install --save-dev @svgr/rollup
# or use yarn
yarn add --dev @svgr/rollup
```

## Usage

**rollup.config.js**

```js
import svgr from '@svgr/rollup'

export default {
  plugins: [svgr()],
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
}
```

**Your code**

```js
import Star from './star.svg'

const App = () => (
  <div>
    <Star />
  </div>
)
```

## Options

SVGR let you specify options in a runtime config file like `svgr.config.js` or directly in the rollup.js plugin:

**rollup.config.js**

```js
import svgr from '@svgr/rollup'

export default {
  plugins: [svgr({ icon: true })],
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
}
```

[SVGR options reference](https://react-svgr.com/docs/options/) describes all options available.

## Using with `@rollup/plugin-url`

It is possible to use it with [`@rollup/plugin-url`](https://github.com/rollup/plugins/tree/master/packages/url).

**rollup.config.js**

```js
import url from '@rollup/plugin-url'
import svgr from '@svgr/rollup'

export default {
  plugins: [url(), svgr({ icon: true })],
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
}
```

**Your code**

```js
import starUrl, { ReactComponent as Star } from './star.svg'

const App = () => (
  <div>
    <img src={starUrl} alt="star" />
    <Star />
  </div>
)
```

The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.

Please note that by default, `@svgr/rollup` will try to export the React Component via default export if there is no other plugin handling svg files with default export. When there is already any other plugin using default export for svg files, `@svgr/rollup` will always export the React component via named export.

If you prefer named export in any case, you may set the `exportType` option to `named`.

### Use your own Babel configuration

By default, `@svgr/rollup` applies a babel transformation with [optimized configuration](https://github.com/gregberge/svgr/blob/main/packages/rollup/src/index.ts). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options.

```js
{
  plugins: [svgr({ babel: false })]
}
```
